<template>
  <div class="search-box">
    <input type="text" />
    <span class="iconfont icon-fangdajing"></span>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      msg: "hi",
    };
  },
};
</script>

<style scoped>
@import url(../assets/iconfont.css);

.search-box {
  width: 100%;
  height: 0.5rem;
  position: relative;
}

.search-box input {
  display: block;
  width: 90%;
  height: 0.4rem;
  border-radius: 0.1rem;
  margin: 0.05rem auto;
  outline: none;
  border: 1px solid red;
  text-indent: 0.45rem;
}

.icon-fangdajing {
  position: absolute;
  left: calc(5% + 0.1rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.25rem;
}
</style>
